.video-container {

  .header {
    display: flex;
    align-items: center;
    padding: 10rpx;
    border-bottom: 1px solid #eee;

    image {
      width: 60rpx;
      height: 60rpx;
    }

    .search {
      flex: auto;
      font-size: 26rpx;
      text-align: center;
      color: var(--themeColor);
    }
  }

  .nav-scroll {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    height: 80rpx;

    .nav-item-wrap {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      font-size: 32rpx;

      .nav-item {
        height: 100%;
        box-sizing: border-box;

        &.active {
          border-bottom: 2px solid var(--themeColor);
        }
      }
    }
  }

  .video-scroll {
    height: calc(100vh - 152rpx);
    /*height: calc(100vh - 100rpx); 用来测试页面上拉触底, 只有页面内容高度大于视口高度时才能触发onReachBottom*/
    /*同样的道理，对于scroll-view，只有其内容高度大于scroll-view容器高度时才能触发上拉触底事件bindscrolltolower*/

    .video-item {
      padding: 0 30rpx;
      margin-bottom: 20rpx;

      .common {
        width: 100%;
        height: 360rpx;
        border-radius: 10rpx;
      }

      .content {
        max-width: 500rpx;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 26rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .footer {
        padding: 20rpx 0;
        border-top: 1rpx solid #eee;

        .avatar {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          vertical-align: middle;
        }

        .nickName {
          margin-left: 20rpx;
          font-size: 26rpx;
          vertical-align: middle;
        }

        .comments_praised {
          float: right;

          .btn {
            display: inline;
            padding: 0;
            background-color: transparent;
            border-color: transparent;

            &:after {
              border: none;
            }
          }

          .item {
            position: relative;
            margin-left: 50rpx;

            .count {
              position: absolute;
              top: -20rpx;
              font-size: 20rpx;
            }
          }
        }
      }
    }
  }
}
